<template>
  <div class="seller" ref="seller_scroll">
    <div class="main">
      <div class="basic-info">
        <div class="name-wrapper">
          <div class="name">{{seller.name}}</div>
          <div class="score">
            <star :score="seller.score" :size="36"></star>
            <span class="rating-count">({{seller.ratingCount}})</span>
            <span class="sell-count">月售{{seller.sellCount}}单</span>
          </div>
          <div class="collect">
            <div class="icon"><span @click="toggleCollect" :class="{'collected':collectFlag}" class="icon-favorite"></span></div>
            <div class="text"><span >{{collectDesc}}</span></div>
          </div>
        </div>
        <div class="delivery-wrapper">
          <ul>
            <li class="min-price"><h2>起送价</h2><div><span class="digital">{{seller.minPrice}}</span><span class="unit">元</span></div></li>
            <li class="delivery-price"><h2>商家配送</h2><div><span class="digital">{{seller.deliveryPrice}}</span><span class="unit">元</span></div></li>
            <li class="delivery-time"><h2>平均配送时间</h2><div><span class="digital">{{seller.deliveryTime}}</span><span class="unit">分钟</span></div></li>
          </ul>
        </div>
      </div>
      <divide></divide>
      <div class="activity-wrapper">
        <h1 class="title">公告与活动</h1>
        <p class="bulletin">{{seller.bulletin}}</p>
        <div class="supports" v-show="seller.supports">
          <ul >
            <li v-for="item in seller.supports">
              <span class="icon" :class="classMap[item.type]"></span>
              <span class="text">{{item.description}}</span>
            </li>
          </ul>
        </div>
      </div>
      <divide></divide>
      <div class="pics-wrapper">
        <h1 class="title">商家实景</h1>
        <div v-show="seller.pics" class="pics" ref="pics">
          <ul ref="picList" >
            <li class="pic" v-for="pic in seller.pics">
              <img :src="pic" width="120" height="90" alt="">
            </li>
          </ul>
        </div>
      </div>
      <divide></divide>
      <div class="info-wrapper">
        <h2 class="title">商家信息</h2>
        <div class="info-list" v-show="seller.infos">
          <ul>
            <li class="info" v-for="info in seller.infos">{{info}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import star from '../star/star.vue'
  import divide from '../divide/divide.vue'
  import IScroll from 'iscroll'
  export default{
    props:{
      seller:{}
    },
    data() {
      return{
        scroll: null,
        picScroll: null,
        collectFlag: false,
        classMap: ['decrease','discount','special','invoice','guarantee']
      }
    },
    computed:{
      collectDesc() {
        if(this.collectFlag){
          return "已收藏";
        }
        else {
          return "收藏";
        }
      }
    },
    methods:{
      toggleCollect() {
        this.collectFlag = !this.collectFlag;
        console.log('toggleCollect');
      }
    },
    created() {
      this.$nextTick(() => {
        let picListArr = this.$refs.picList.getElementsByTagName('li');
        let width = -6;
        for (let i=0; i<picListArr.length;i++){
          width += picListArr[i].offsetWidth + 6;
        }
        this.$refs.picList.style.width = width + 'px';
//        console.log(width);

        if(!this.scroll){
          this.scroll = new IScroll(this.$refs.seller_scroll,{
            mouseWheel:true
          });
        }
        else{
          this.scroll.refresh();
        }
        if (!this.picScroll){
          this.picScroll = new IScroll(this.$refs.pics,{
            scrollX: true
          });
        }
        else{
          this.picScroll.refresh();
        }
      });
    },
    components:{
      star,
      divide
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/mixin";

  .seller{
    position: absolute;
    top: 174px;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    font-family: "Microsoft YaHei";
    .title{
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 12px ;
    }
    .basic-info{
      padding: 18px;
      .name-wrapper{
        position: relative;
        .name{
          font-size: 14px;
          line-height: 14px;
          color: rgb(7,17,27);
          margin-bottom: 8px;
        }
        .score{
          padding-bottom: 18px;
          @include border-1px(rgba(7,17,27,0.1));
          span{
            font-size: 10px;
            color: rgb(77,85,93);
            line-height: 17px;
            vertical-align: top;
          }
          .rating-count{
            margin-right: 12px;
          }
        }
        .collect{
          position: absolute;
          right: 0;
          bottom: 18px;
          min-width: 44px;
          .icon{
            text-align: center;
            margin-bottom: 4px;
            &>span{
              font-size: 24px;
              line-height: 24px;
              color: rgba(7,17,27,0.2);
              &.collected{
                color: rgb(240,20,20);
              }
            }
          }
          .text{
            text-align: center;
            &>span{
              font-size: 10px;
              line-height: 10px;
              color: rgb(77,85,93);
            }
          }
        }
      }
      .delivery-wrapper{
        padding-top: 18px;
        ul{
          display: flex;
          li{
            flex: 1;
            border-left: 1px solid rgba(7,17,27,0.1);
            &:first-child{
              border: none;
            }
            h2{
              font-size: 10px;
              color: rgb(147,153,159);
              line-height: 10px;
              margin-bottom: 4px;
              text-align: center;
            }
            &>div{
              text-align: center;
              .digital{
                font-size: 24px;
                line-height: 24px;
                font-weight: 200;
                color: rgb(7,17,27);
              }
            }
          }
        }
      }

    }
    .activity-wrapper{
      margin: 18px 18px 0;
      .title{
        margin-bottom: 8px ;
      }
      p{
        margin: 0 12px 16px ;
        font-size: 12px;
        line-height: 24px;
        font-weight: 200;
        color: rgb(240,20,20);
      }
      .supports {
        li{
          @include border-top-1px(rgba(7,17,27,0.1));
          padding: 16px 12px;
        }
        .icon{
          display: inline-block;
          width: 16px;
          height: 16px;
          background-size: 16px 16px;
        }
        .icon.decrease{
          @include bg_image('decrease_4');
        }
        .icon.discount{
          @include bg_image('discount_4');
        }
        .icon.guarantee{
          @include bg_image('guarantee_4');
        }
        .icon.invoice{
          @include bg_image('invoice_4');
        }
        .icon.special{
          @include bg_image('special_4');
        }
        .text{
          vertical-align: top;
          font-size: 12px;
          line-height: 16px;
          font-weight: 200;
          margin-left: 6px;
        }
      }
    }
    .pics-wrapper{
      margin: 18px;
      .pics{
        overflow: hidden;
        ul{
          white-space: nowrap;
        }
        .pic{
          display: inline-block;
          margin-right: 6px;
          &:last-child{
            margin-right: 0;
          }
        }
      }

    }
    .info-wrapper{
      padding: 18px;
      .info{
        padding: 16px 12px;
        font-size: 12px;
        line-height: 16px;
        color: rgb(7,17,27);
        font-weight: 200;
        @include  border-1px(rgba(7,17,27,0.1));
      }
    }

  }

</style>
